<template>
    <view class="container" :style="{ background: easyGetColor('red') }">
        <header-bar :config="config" @onBack="onBack"></header-bar>
        <image class="bg" :src="bg" mode="aspectFill"></image>
        <view class="qcode-box">
            <image class="qcode-bg" :src="qcodeBg" mode="aspectFill"></image>
            <text class="qcode-text">请向客户展示该二维码</text>
            <image :src="qcode" mode="" class="qcode-img" @longpress="save"></image>
        </view>
        <view class="longpress-text">长按保存二维码</view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        qcode: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            config: {
                title: "收款二维码",
                color: "#ffffff",
                isCustomBackFn: true,
            },
            bg: "/static/qcode/bg.png",
            qcodeBg: "/static/qcode/box.png",
        }
    },
    created() {
        let mainColor = this.easyGetColor("red")
        this.config.backgroundColor = [1, mainColor]
    },
    onLoad(e) {},
    mounted() {},
    methods: {
        onBack() {
            this.$emit("onBack")
        },
        save(e) {
			console.log(123)
			console.log(e)
            //#ifdef APP-PLUS
			if(this.qcode.indexOf('https://') == -1){
				this.saveBase64Img(this.qcode)
			}else{
				console.log(e)
				const imageSrc = e.currentTarget.src; // 获取图片链接
				uni.downloadFile({
				  url: this.qcode,
				  success: downloadResult => {
					if (downloadResult.statusCode === 200) {
					  uni.saveImageToPhotosAlbum({
						filePath: downloadResult.tempFilePath,
						success: () => {
						  uni.showToast({ title: '保存成功' });
						},
						fail: () => {
						  uni.showToast({ title: '保存失败', icon: 'none' });
						}
					  });
					}
				  },
				  fail: () => {
					uni.showToast({ title: '下载失败', icon: 'none' });
				  }
				});
			}
            // #endif

            // this.getSaveImg(this.qcode)
        },
        saveBase64Img(base64) {
            let _this = this
            const bitmap = new plus.nativeObj.Bitmap("test")
            bitmap.loadBase64Data(
                base64,
                function () {
                    const url = "_doc/" + new Date() + ".png" // url建议用时间戳命名方式
                    console.log("url:", url)
                    bitmap.save(
                        url,
                        {
                            overwrite: true, // 是否覆盖
                            // quality: 'quality'  // 图片清晰度
                        },
                        (i) => {
                            uni.saveImageToPhotosAlbum({
                                filePath: url,
                                success: function () {
                                    console.log("保存成功")
                                    _this.easyToast("保存成功，请到手机相册")
                                    _this.teamShare = null
                                    bitmap.clear()
                                },
                            })
                        },
                        (e) => {
                            console.log("保存失败", e)
                            _this.easyToast(e)
                            bitmap.clear()
                        },
                    )
                },
                (e) => {
                    console.log("保存失败", e)
                    bitmap.clear()
                },
            )
        },
		getSaveImg(e){
			
		},
    },
}
</script>

<style lang="scss">
.container {
    background: $app-color-main;
    position: relative;
    height: 100vh;

    .bg {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .qcode-box {
        position: relative;
        width: calc(100% - 96rpx);
        margin: 200rpx 48rpx 20rpx;
        height: 0;
        box-sizing: border-box;
        padding: 0 0 0 0;
        padding-top: calc(125% - 120rpx);

        .qcode-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .qcode-text {
            position: absolute;
            width: 100%;
            text-align: center;
            color: $color-white;
            font-size: 30rpx;
            top: 38rpx;
        }

        .qcode-img {
            // background: #000;
            height: 455rpx;
            width: 400rpx;
            left: calc(50% - 200rpx);
            position: absolute;
            bottom: 23%;
        }

        // background: url('~@/static/qcode/box.png') 100% 100% no-repeat;;
    }

    .longpress-text {
        color: $color-white;
        text-align: center;
        position: relative;
        z-index: 2;
    }
}
</style>
